Tối Ưu Hiệu Năng JavaScript: Phân Chia Mã (Code Splitting) so với Đánh Giá Trì Hoãn (Lazy Evaluation)

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

Trong ví dụ này, OtherComponent chỉ được tải khi nó được hiển thị. Trong khi nó đang được tải, người dùng sẽ thấy thông báo "Loading...".

Công Cụ Để Phân Chia Mã

• Webpack: Một trình đóng gói mô-đun phổ biến hỗ trợ nhiều kỹ thuật phân chia mã khác nhau.
• Rollup: Một trình đóng gói mô-đun khác tập trung vào việc tạo ra các bundle nhỏ, hiệu quả.
• Parcel: Một trình đóng gói không cần cấu hình, tự động xử lý việc phân chia mã.
• Vite: Một công cụ xây dựng tận dụng các mô-đun ES gốc để phát triển nhanh và xây dựng sản xuất được tối ưu hóa.

Đánh Giá Trì Hoãn (Lazy Evaluation): Trì Hoãn Tính Toán

Đánh Giá Trì Hoãn Là Gì?

Đánh giá trì hoãn (Lazy evaluation), còn được gọi là đánh giá hoãn lại, là một kỹ thuật lập trình trong đó việc đánh giá một biểu thức bị trì hoãn cho đến khi giá trị của nó thực sự cần thiết. Nói cách khác, các tính toán chỉ được thực hiện khi kết quả của chúng được yêu cầu, thay vì háo hức tính toán chúng trước.

Hãy tưởng tượng bạn đang chuẩn bị một bữa ăn nhiều món. Bạn sẽ không nấu mọi món ăn cùng một lúc. Thay vào đó, bạn sẽ chuẩn bị từng món ăn chỉ khi đến lúc phục vụ. Đánh giá trì hoãn hoạt động tương tự, chỉ thực hiện các tính toán khi kết quả của chúng là cần thiết.

Cách Đánh Giá Trì Hoãn Hoạt Động

Trong JavaScript, đánh giá trì hoãn có thể được triển khai bằng nhiều kỹ thuật khác nhau:

• Hàm (Functions): Gói một biểu thức trong một hàm cho phép bạn trì hoãn việc đánh giá của nó cho đến khi hàm được gọi.
• Trình Tạo (Generators): Trình tạo cung cấp một cách để tạo các trình vòng lặp tạo ra các giá trị theo yêu cầu.
• Ghi Nhớ (Memoization): Ghi nhớ liên quan đến việc lưu vào bộ nhớ đệm kết quả của các lệnh gọi hàm tốn kém và trả về kết quả được lưu trong bộ nhớ đệm khi các đầu vào giống nhau xảy ra lại.
• Proxy (Proxies): Proxy có thể được sử dụng để chặn quyền truy cập thuộc tính và trì hoãn việc tính toán các giá trị thuộc tính cho đến khi chúng thực sự được truy cập.

Lợi Ích Của Đánh Giá Trì Hoãn

• Cải Thiện Hiệu Năng: Bằng cách trì hoãn các tính toán không cần thiết, đánh giá trì hoãn có thể cải thiện đáng kể hiệu năng, đặc biệt là khi xử lý các tập dữ liệu lớn hoặc các phép tính phức tạp.
• Giảm Mức Sử Dụng Bộ Nhớ: Đánh giá trì hoãn có thể giảm mức sử dụng bộ nhớ bằng cách tránh tạo các giá trị trung gian không cần thiết ngay lập tức.
• Tăng Khả Năng Phản Hồi: Bằng cách tránh các tính toán không cần thiết trong quá trình tải ban đầu, đánh giá trì hoãn có thể tăng khả năng phản hồi của ứng dụng.
• Cấu Trúc Dữ Liệu Vô Hạn: Đánh giá trì hoãn cho phép bạn làm việc với các cấu trúc dữ liệu vô hạn, chẳng hạn như danh sách hoặc luồng vô hạn, bằng cách chỉ tính toán các phần tử cần thiết theo yêu cầu.

Ví Dụ: Tải Ảnh Trì Hoãn (Lazy Loading Images)

Một trường hợp sử dụng phổ biến cho đánh giá trì hoãn là tải ảnh trì hoãn. Thay vì tải tất cả hình ảnh trên một trang trước, bạn có thể trì hoãn việc tải các hình ảnh ban đầu không hiển thị trong khung nhìn. Điều này có thể cải thiện đáng kể thời gian tải trang ban đầu và giảm mức tiêu thụ băng thông mạng.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Ví dụ này sử dụng API IntersectionObserver để phát hiện khi một hình ảnh nhập vào khung nhìn. Khi một hình ảnh hiển thị, thuộc tính src của nó được đặt thành giá trị của thuộc tính data-src, kích hoạt hình ảnh tải. Sau đó, trình quan sát sẽ bỏ quan sát hình ảnh để ngăn nó tải lại.

Ví Dụ: Ghi Nhớ (Memoization)

Ghi nhớ có thể được sử dụng để tối ưu hóa các lệnh gọi hàm tốn kém. Đây là một ví dụ:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

Trong ví dụ này, hàm memoize lấy một hàm làm đầu vào và trả về một phiên bản được ghi nhớ của hàm đó. Hàm được ghi nhớ lưu vào bộ nhớ đệm kết quả của các lệnh gọi trước đó, để các lệnh gọi tiếp theo với cùng các đối số có thể trả về kết quả được lưu trong bộ nhớ đệm mà không cần thực thi lại hàm ban đầu.

Phân Chia Mã (Code Splitting) so với Đánh Giá Trì Hoãn (Lazy Evaluation): Sự Khác Biệt Chính

Mặc dù cả phân chia mã và đánh giá trì hoãn đều là các kỹ thuật tối ưu hóa mạnh mẽ, nhưng chúng giải quyết các khía cạnh khác nhau của hiệu năng:

• Phân Chia Mã (Code Splitting): Tập trung vào việc giảm kích thước bundle ban đầu bằng cách chia mã thành các phần nhỏ hơn và tải chúng theo yêu cầu. Nó chủ yếu được sử dụng để cải thiện thời gian tải trang ban đầu.
• Đánh Giá Trì Hoãn (Lazy Evaluation): Tập trung vào việc trì hoãn việc tính toán các giá trị cho đến khi chúng thực sự cần thiết. Nó chủ yếu được sử dụng để cải thiện hiệu năng khi xử lý các phép tính tốn kém hoặc các tập dữ liệu lớn.

Về bản chất, phân chia mã làm giảm lượng mã cần tải xuống trước, trong khi đánh giá trì hoãn làm giảm lượng tính toán cần thực hiện trước.

Khi Nào Nên Sử Dụng Phân Chia Mã so với Đánh Giá Trì Hoãn

Phân Chia Mã

• Các Ứng Dụng Lớn: Sử dụng phân chia mã cho các ứng dụng có lượng mã JavaScript lớn, đặc biệt là những ứng dụng có nhiều tuyến đường hoặc tính năng.
• Cải Thiện Thời Gian Tải Ban Đầu: Sử dụng phân chia mã để cải thiện thời gian tải trang ban đầu và giảm thời gian tương tác.
• Giảm Băng Thông Mạng: Sử dụng phân chia mã để giảm lượng dữ liệu cần truyền qua mạng.

Đánh Giá Trì Hoãn

• Các Phép Tính Tốn Kém: Sử dụng đánh giá trì hoãn cho các hàm thực hiện các phép tính tốn kém hoặc truy cập các tập dữ liệu lớn.
• Cải Thiện Khả Năng Phản Hồi: Sử dụng đánh giá trì hoãn để cải thiện khả năng phản hồi của ứng dụng bằng cách trì hoãn các tính toán không cần thiết trong quá trình tải ban đầu.
• Cấu Trúc Dữ Liệu Vô Hạn: Sử dụng đánh giá trì hoãn khi làm việc với các cấu trúc dữ liệu vô hạn, chẳng hạn như danh sách hoặc luồng vô hạn.
• Tải Trì Hoãn Nội Dung Đa Phương Tiện: Triển khai tải trì hoãn cho hình ảnh, video và các nội dung đa phương tiện khác để cải thiện thời gian tải trang.

Kết Hợp Phân Chia Mã và Đánh Giá Trì Hoãn

Trong nhiều trường hợp, phân chia mã và đánh giá trì hoãn có thể được kết hợp để đạt được hiệu quả hiệu năng cao hơn nữa. Ví dụ: bạn có thể sử dụng phân chia mã để chia ứng dụng của mình thành các phần nhỏ hơn và sau đó sử dụng đánh giá trì hoãn để trì hoãn việc tính toán các giá trị trong các phần đó.

Hãy xem xét một ứng dụng thương mại điện tử. Bạn có thể sử dụng phân chia mã để chia ứng dụng thành các bundle riêng biệt cho trang danh sách sản phẩm, trang chi tiết sản phẩm và trang thanh toán. Sau đó, trong trang chi tiết sản phẩm, bạn có thể sử dụng đánh giá trì hoãn để trì hoãn việc tải hình ảnh hoặc tính toán các đề xuất sản phẩm cho đến khi chúng thực sự cần thiết.

Ngoài Phân Chia Mã và Đánh Giá Trì Hoãn: Các Kỹ Thuật Tối Ưu Hóa Bổ Sung

Mặc dù phân chia mã và đánh giá trì hoãn là các kỹ thuật mạnh mẽ, nhưng chúng chỉ là hai mảnh ghép của bức tranh khi nói đến tối ưu hóa hiệu năng JavaScript. Dưới đây là một số kỹ thuật bổ sung mà bạn có thể sử dụng để cải thiện hơn nữa hiệu năng:

• Thu Nhỏ (Minification): Loại bỏ các ký tự không cần thiết (ví dụ: khoảng trắng, nhận xét) khỏi mã của bạn để giảm kích thước của nó.
• Nén (Compression): Nén mã của bạn bằng các công cụ như Gzip hoặc Brotli để giảm thêm kích thước của nó.
• Bộ Nhớ Đệm (Caching): Tận dụng bộ nhớ đệm của trình duyệt và bộ nhớ đệm CDN để giảm số lượng yêu cầu đến máy chủ của bạn.
• Loại Bỏ Mã Chết (Tree Shaking): Loại bỏ mã không sử dụng khỏi các bundle của bạn để giảm kích thước của chúng.
• Tối Ưu Hóa Hình Ảnh (Image Optimization): Tối ưu hóa hình ảnh bằng cách nén chúng, thay đổi kích thước chúng thành kích thước thích hợp và sử dụng các định dạng hình ảnh hiện đại như WebP.
• Khử Rung và Điều Tiết (Debouncing and Throttling): Kiểm soát tốc độ thực thi của các trình xử lý sự kiện để ngăn ngừa các vấn đề về hiệu năng.
• Thao Tác DOM Hiệu Quả (Efficient DOM Manipulation): Giảm thiểu các thao tác DOM và sử dụng các kỹ thuật thao tác DOM hiệu quả.
• Web Workers: Chuyển các tác vụ tính toán chuyên sâu sang web workers để ngăn chúng chặn luồng chính.

Kết Luận

Tối ưu hóa hiệu năng JavaScript là một khía cạnh quan trọng để mang lại trải nghiệm người dùng tích cực và đạt được các mục tiêu kinh doanh. Phân chia mã (Code splitting) và đánh giá trì hoãn (lazy evaluation) là hai kỹ thuật mạnh mẽ có thể cải thiện đáng kể hiệu năng bằng cách giảm thời gian tải ban đầu, giảm mức tiêu thụ băng thông mạng và trì hoãn các tính toán không cần thiết. Bằng cách hiểu cách các kỹ thuật này hoạt động và khi nào nên sử dụng chúng, bạn có thể tạo ra các ứng dụng web nhanh hơn, phản hồi nhanh hơn và thú vị hơn.

Hãy nhớ xem xét các yêu cầu ứng dụng cụ thể của bạn và sử dụng các kỹ thuật phù hợp nhất với nhu cầu của bạn. Liên tục theo dõi hiệu năng của ứng dụng và lặp lại các chiến lược tối ưu hóa của bạn để đảm bảo rằng bạn đang cung cấp trải nghiệm người dùng tốt nhất có thể. Nắm bắt sức mạnh của phân chia mã và đánh giá trì hoãn để tạo ra các ứng dụng web không chỉ giàu tính năng mà còn có hiệu năng cao và thú vị khi sử dụng trên toàn thế giới.

Tài Nguyên Học Tập Thêm

• Tài Liệu Webpack: https://webpack.js.org/
• Tài Liệu Rollup: https://rollupjs.org/guide/en/
• Tài Liệu Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/